<!--home-->
<template>
    <div class="box" :style="{ backgroundColor: modelBk == '白天模式' ? '#fff' : '#000' }">
        <el-container :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }">
            <!-- <el-header class="headerStyle">杨明是混蛋</el-header> -->
            <div class="container">
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }"
                                    :src="zhihuSrc"></el-image>
                                <div class="item-nav">知乎热榜</div>
                            </div>
                            <i class="icon-style" :class="zhihuRef" @click="refreshBtn('zhihu')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="zhihuLoading">

                                <div class="item-title" v-for="(item, i) in zhihuList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>

                            </el-skeleton>


                        </div>
                    </div>
                </div>
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }"
                                    :src="jinritoutiaoSrc"></el-image>
                                <div class="item-nav">今日头条热榜</div>
                            </div>
                            <i class="icon-style" :class="jinritoutiaoRef" @click="refreshBtn('jinritoutiao')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="jinritoutiaoLoading">

                                <div class="item-title" v-for="(item, i) in jinritoutiaoList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>

                            </el-skeleton>
                        </div>
                    </div>
                </div>
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }"
                                    :src="baiduSrc"></el-image>
                                <div class="item-nav">百度热榜</div>
                            </div>
                            <i class="icon-style" :class="baiduRef" @click="refreshBtn('baidu')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="baiduLoading">

                                <div class="item-title" v-for="(item, i) in baiduList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>

                            </el-skeleton>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }"
                                    :src="bilibiliSrc"></el-image>
                                <div class="item-nav">bilibili热榜</div>
                            </div>
                            <i class="icon-style" :class="bilibiliRef" @click="refreshBtn('bilibili')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="bilibiliLoading">

                                <div class="item-title" v-for="(item, i) in bilibiliList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>

                            </el-skeleton>

                        </div>
                    </div>
                </div>
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }"
                                    :src="douyinSrc"></el-image>
                                <div class="item-nav">抖音热榜</div>
                            </div>
                            <i class="icon-style" :class="douyinRef" @click="refreshBtn('douyin')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="douyinLoading">

                                <div class="item-title" v-for="(item, i) in douyinList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>

                            </el-skeleton>
                        </div>
                    </div>
                </div>
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }"
                                    :src="weiboSrc"></el-image>
                                <div class="item-nav">微博热榜</div>
                            </div>
                            <i class="icon-style" :class="weiboRef" @click="refreshBtn('weibo')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="weiboLoading">
                                <div class="item-title" v-for="(item, i) in weiboList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>
                            </el-skeleton>
                        </div>
                    </div>
                </div>


            </div>

            <div class="container">
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }"
                                    :src="tiebaSrc"></el-image>
                                <div class="item-nav">百度贴吧</div>
                            </div>
                            <i class="icon-style" :class="tiebaRef" @click="refreshBtn('tieba')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="tiebaLoading">

                                <div class="item-title" v-for="(item, i) in tiebaList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>

                            </el-skeleton>

                        </div>
                    </div>
                </div>
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }"
                                    :src="CSDNSrc"></el-image>
                                <div class="item-nav">CSDN</div>
                            </div>
                            <i class="icon-style" :class="CSDNRef" @click="refreshBtn('CSDN')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="CSDNLoading">

                                <div class="item-title" v-for="(item, i) in CSDNList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>

                            </el-skeleton>
                        </div>
                    </div>
                </div>
                <div class="rectangle">
                    <div class="item-list">
                        <div class="item-head">
                            <div class="flex-head">
                                <el-image class="logo-style"
                                    :style="{ filter: modelBk == '白天模式' ? 'invert(1)' : 'invert(0)' }" :src="NGASrc"
                                    style="border-radius: 5px;"></el-image>
                                <div class="item-nav">NGA</div>
                            </div>
                            <i class="icon-style" :class="NGARef" @click="refreshBtn('NGA')"></i>
                        </div>
                        <div class="item-news">
                            <el-skeleton :rows="8" :loading="NGALoading">
                                <div class="item-title" v-for="(item, i) in NGAList">
                                    <el-link type="info">
                                        <div class="item-name" @click="jumpNews(item.url)">
                                            <div v-if="i == 0" style="color: #CC3932;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 1" style="color: #DE5629;">{{ i + 1 }}.</div>
                                            <div v-else-if="i == 2" style="color: #BC984F;">{{ i + 1 }}.</div>
                                            <div v-else>{{ i + 1 }}.</div>
                                            {{ item.title }}
                                        </div>
                                    </el-link>
                                </div>
                            </el-skeleton>
                        </div>
                    </div>
                </div>


            </div>
            <el-footer style="height: 100%">
                <div class="footer-text">© 2025 whatsupbee.dpdns.org</div>
            </el-footer>
        </el-container>
        <div class="btn_bk">
            <el-radio-group v-model="modelBk">
                <el-radio-button label="夜间模式" icon="el-icon-moon"><i class="el-icon-moon"></i></el-radio-button>
                <el-radio-button label="白天模式" icon="el-icon-sunny"><i class="el-icon-sunny"></i></el-radio-button>
            </el-radio-group>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { ElNotification } from 'element-plus'

export default {
    props: {},
    data() {
        return {
            textContent: "",
            ws: null,
            modelBk: '夜间模式',
            zhihuSrc: require('@/assets/icon/zhihu.png'),
            jinritoutiaoSrc: require('@/assets/icon/jinritoutiao.png'),
            baiduSrc: require('@/assets/icon/baidu.png'),
            bilibiliSrc: require('@/assets/icon/bilibili.png'),
            douyinSrc: require('@/assets/icon/douyin.png'),
            weiboSrc: require('@/assets/icon/weibo.png'),
            tiebaSrc: require('@/assets/icon/tieba.png'),
            zhihuRef: "el-icon-refresh-right",
            baiduRef: "el-icon-refresh-right",
            bilibiliRef: "el-icon-refresh-right",
            jinritoutiaoRef: "el-icon-refresh-right",
            weiboRef: "el-icon-refresh-right",
            douyinRef: "el-icon-refresh-right",
            tiebaRef: "el-icon-refresh-right",
            baiduList: [],
            douyinList: [],
            weiboList: [],
            jinritoutiaoList: [],
            zhihuList: [],
            bilibiliList: [],
            onlineCount: 0,
            weiboLoading: true,
            baiduLoading: true,
            zhihuLoading: true,
            douyinLoading: true,
            bilibiliLoading: true,
            jinritoutiaoLoading: true,
            tiebaList: [],
            tiebaLoading: true,
            CSDNList: [],
            CSDNLoading: true,
            CSDNSrc: require('@/assets/icon/csdn.png'),
            CSDNRef: "el-icon-refresh-right",
            NGAList: [],
            NGALoading: true,
            NGASrc: require('@/assets/icon/NGA.png'),
            NGARef: "el-icon-refresh-right",
        };
    },
    watch: {
        //缓存模式
        modelBk(val) {
            localStorage.setItem('modelBk', val);
        }
    },
    created() {
        this.NGAhot();
        this.CSDNhot();
        this.tiebahot();
        this.baiduhot();
        this.zhihuhot();
        this.weibohot();
        this.bilibilihot();
        this.toutiaohot();
        this.douyinhot();
        this.showTipe();
        console.log("一坨屎山！别看了~")
        //读取缓存
        if (localStorage.getItem('modelBk')) {
            this.modelBk = localStorage.getItem('modelBk');
        } else {
            this.modelBk = '夜间模式'
        }

    },
    mounted() {
        // this.join();
    },
    beforeUnmount() {
        // this.exit();
    },
    methods: {

        showTipe() {
            const today = new Date();
            if (today.getDay() === 4) { // 0是周日，1是周一
                //疯狂星期四
                axios.get('https://api.pearktrue.cn/api/kfc?type=json')
                    .then(response => {
                        console.log(response)
                        if (response.data) {
                            ElNotification({
                                title: "疯狂星期四文案",
                                message: response.data.text,
                                duration: 5000,
                                position: 'top-right'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error); // 打印错误信息
                        this.baiduRef = "el-icon-refresh-right";
                    });
            }
            //每日金价
            axios.get('https://api.pearktrue.cn/api/goldprice/')
                .then(response => {
                    console.log(response)
                    if (response.data) {
                        ElNotification({
                            title: "最新金价",
                            message: "中国上海黄金交易所 " + response.data.price + " 人民币/克",
                            duration: 5000,
                            position: 'top-right'
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.baiduRef = "el-icon-refresh-right";
                });
            if (today.getDay() !== 4) {
                //每日沙雕新闻
                axios.get('https://api.pearktrue.cn/api/shadiao/')
                    .then(response => {
                        if (response.data.code == 200) {
                            ElNotification({
                                title: "沙雕新闻 【" + response.data.update + "】",
                                message: response.data.data.content,
                                duration: 0,
                                position: 'bottom-right'
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error); // 打印错误信息
                        this.baiduRef = "el-icon-refresh-right";
                    });
            }
        },
        // join() {
        //     const wsurl = this.url;
        //     this.ws = new WebSocket(wsurl);
        //     this.ws.onopen = (event) => {
        //         // 可以在这里添加打开连接时的逻辑
        //     };

        //     this.ws.onmessage = (event) => {
        //         this.textContent = event.data + "\n";
        //         this.showTipe(event.data)
        //         console.log(event.data)
        //     };

        //     this.ws.onclose = (event) => {
        //         // 可以在这里添加关闭连接时的逻辑
        //         this.ws.close();
        //         this.ws = null;
        //     };
        // },
        // exit() {
        //     if (this.ws) {
        //         this.ws.close();
        //         this.ws = null;
        //     }
        // },
        // send() {
        //     if (this.ws) {
        //         this.ws.send("在线人数");
        //     } else {
        //         alert("未连接到服务器");
        //     }
        // },
        //打开新窗口页面
        jumpNews(index) {
            window.open(index, '_blank');
        },
        tiebahot() {
            this.tiebaRef = "el-icon-loading";
            this.tiebaLoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=百度贴吧')
                .then(response => {
                    if (response.data.code == 200) {
                        this.tiebaList = JSON.parse(JSON.stringify(response.data.data));
                        this.tiebaRef = "el-icon-refresh-right";
                        this.tiebaLoading = false;
                    } else {
                        this.tiebaLoadingRef = "el-icon-loading";
                    }

                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.tiebaRef = "el-icon-refresh-right";
                });
        },
        NGAhot() {
            this.NGARef = "el-icon-loading";
            this.NGALoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=NGA')
                .then(response => {
                    if (response.data.code == 200) {
                        this.NGAList = JSON.parse(JSON.stringify(response.data.data));
                        this.NGARef = "el-icon-refresh-right";
                        this.NGALoading = false;
                    } else {
                        this.NGALoadingRef = "el-icon-loading";
                    }

                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.NGARef = "el-icon-refresh-right";
                });
        },
        CSDNhot() {
            this.CSDNRef = "el-icon-loading";
            this.CSDNLoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=CSDN')
                .then(response => {
                    if (response.data.code == 200) {
                        this.CSDNList = JSON.parse(JSON.stringify(response.data.data));
                        this.CSDNRef = "el-icon-refresh-right";
                        this.CSDNLoading = false;
                    } else {
                        this.CSDNLoadingRef = "el-icon-loading";
                    }

                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.CSDNRef = "el-icon-refresh-right";
                });
        },
        baiduhot() {
            this.baiduRef = "el-icon-loading";
            this.baiduLoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=百度')
                .then(response => {
                    if (response.data.code == 200) {
                        this.baiduList = JSON.parse(JSON.stringify(response.data.data));
                        this.baiduRef = "el-icon-refresh-right";
                        this.baiduLoading = false;
                    } else {
                        this.baiduRef = "el-icon-loading";
                    }

                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.baiduRef = "el-icon-refresh-right";
                });
        },
        zhihuhot() {
            this.zhihuRef = "el-icon-loading";
            this.zhihuLoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=知乎')
                .then(response => {
                    if (response.data.code == 200) {
                        this.zhihuList = JSON.parse(JSON.stringify(response.data.data));
                        this.zhihuRef = "el-icon-refresh-right";
                        this.zhihuLoading = false;

                    } else {
                        this.zhihuRef = "el-icon-loading";
                    }
                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息

                    this.zhihuRef = "el-icon-refresh-right";
                });

        },
        weibohot() {
            this.weiboRef = "el-icon-loading";
            this.weiboLoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=微博')
                .then(response => {
                    if (response.data.code == 200) {
                        this.weiboList = JSON.parse(JSON.stringify(response.data.data));
                        this.weiboRef = "el-icon-refresh-right";
                        this.weiboLoading = false;
                    } else {
                        this.weiboRef = "el-icon-loading";

                    }
                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.weiboRef = "el-icon-refresh-right";
                });
        },
        douyinhot() {
            this.douyinRef = "el-icon-loading";
            this.douyinLoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=抖音')
                .then(response => {
                    if (response.data.code == 200) {
                        this.douyinList = JSON.parse(JSON.stringify(response.data.data));
                        this.douyinRef = "el-icon-refresh-right";
                        this.douyinLoading = false;
                    } else {
                        this.douyinRef = "el-icon-loading";
                    }
                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.douyinRef = "el-icon-refresh-right";
                });
        },
        bilibilihot() {
            this.bilibiliRef = "el-icon-loading";
            this.bilibiliLoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=哔哩哔哩')
                .then(response => {
                    if (response.data.code == 200) {
                        this.bilibiliList = JSON.parse(JSON.stringify(response.data.data));
                        this.bilibiliRef = "el-icon-refresh-right";
                        this.bilibiliLoading = false;
                    } else {
                        this.bilibiliRef = "el-icon-loading";
                    }
                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.bilibiliRef = "el-icon-refresh-right";
                });
        },
        toutiaohot() {
            this.jinritoutiaoRef = "el-icon-loading";
            this.jinritoutiaoLoading = true
            axios.get('https://api.pearktrue.cn/api/dailyhot/?title=今日头条')
                .then(response => {
                    if (response.data.code == 200) {
                        this.jinritoutiaoList = JSON.parse(JSON.stringify(response.data.data));
                        this.jinritoutiaoRef = "el-icon-refresh-right";
                        this.jinritoutiaoLoading = false;
                    } else {
                        this.jinritoutiaoRef = "el-icon-loading";
                    }
                })
                .catch(error => {
                    console.error('Error:', error); // 打印错误信息
                    this.jinritoutiaoRef = "el-icon-refresh-right";
                });
        },
        refreshBtn(key) {
            switch (key) {
                case "zhihu":
                    this.zhihuhot();
                    break;
                case "baidu":

                    this.baiduhot();
                    break;
                case "bilibili":

                    this.bilibilihot();
                    break;
                case "jinritoutiao":

                    this.toutiaohot();
                    break;
                case "weibo":

                    this.weibohot();
                    break;
                case "douyin":
                    this.douyinhot();
                    break;
                case "CSDN":
                    this.CSDNhot();
                    break;
                case "NGA":
                    this.NGAhot();
                    break;
                case "tieba":
                    this.tiebahot();
                    break;
                default:
                    break;
            }
        },
    },
    beforeCreate() {
        document.querySelector('body').setAttribute('style', 'margin:0;')
    },

};
</script>
<style>
.item-name {
    display: flex;
    /* width: 88%; */
}

.footer-text {
    color: #fff;
    text-align: center;
    padding: 30px;
    font-size: 10px;
}

.logo-style {
    width: 32px;
    height: 32px;
    filter: invert(1);
}

.icon-style {
    color: #fff;
    font-size: 25px;
}

.flex-head {
    display: flex;
    align-items: center;
}

.item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.item-nav {
    font-weight: 700;
    color: #A1AAAA;
    font-size: 18px;
    margin-left: 10px;
}

.item-news {
    height: 85%;
    width: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
}

.item-list {
    width: 88%;
    margin: auto;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;
    height: 100%;
}

.item-icon {
    width: 32px;
    height: 32px;
}

.item-title {
    color: #AAAAAA;
    font-size: 15px;
    margin: 8px 0px 0 0px;
    display: flex;
    justify-content: space-between;
}


body {
    background-color: #000
}

.box {
    margin: 0;
    padding: 0;
    background-color: #000;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;


}

.item-news::-webkit-scrollbar {
    display: none;
}

@font-face {
    font-family: localfont;
    src: url("../static/font/Huiwen.woff2");
}

.el-head {
    font-size: 40px;
    color: red;
    text-align: center;
    font-family: 'localfont';
    padding: 30px;
    padding-bottom: 0px;
}

.rectangle {
    width: 21%;
    padding: 15px;
    height: 395px;
    margin: 2% 2% 0 0;
    border-radius: 5px;
    background-color: #1F2025;
}

.btn_bk {
    position: fixed;
    bottom: 0;
}

.headerStyle {
    font-size: 43px;
    color: red;
    text-align: center;
    line-height: 60px;
}

@media screen and (max-width: 768px) {

    /* 媒体查询：屏幕宽度小于等于768px时的样式 */
    .rectangle {
        width: 88%;
        /* aspect-ratio: 3 / 5; */
        margin: 2.5%;
    }
}
</style>